Twikoo Adds a Comment System to Your Blog

😀

Preface to this article:

Twikoo is a clean, secure, and free static website comment system built on Tencent Cloud. After testing it out, I found Twikoo to be incredibly powerful and have decided to use it as my primary comment plugin.

Twikoo supports instant notifications, anti-spam plugins, privacy settings, and more. No separate backend login is required, and configuration is extremely convenient—you can manage comments and configure plugins directly within the page's comment section.

📝 Key Features

Quick Setup

NotionNext now supports this comment plugin in its latest version. Configuration is straightforward:

Add an environment variable ` NEXT_PUBLIC_COMMENT_ENV_ID ` in your Vercel backend; its value should be the URL of your deployed Twikoo backend. For example:

After redeploying your project, you'll obtain the following configuration:

💡 Question: How do you obtain the Twikoo backend URL? Using Vercel, you can quickly deploy your own Twikoo backend to store comment data.

Twikoo Deployment Steps

Practical Steps

Clone the Repository

First, fork the author's repository. Enter your own repository name and click the " Create fork " button to create your own repository.

Create a D1 Database

Log in to Cloudflare, navigate to Storage & Databases > D1 SQL Database in the left sidebar, click the Create button, enter " twikoo " as the database name, then click Create.

After successful creation, return to the list page and locate the corresponding ID within the red box. Copy this ID.

Then click the twikoo database, select the Console tab, copy the entire contents of the schema.sql file from your repository's root directory into the input field, and click the Execute button.

The database tables will be created shortly. Finally, update the `database_id` value in the ` wrangler.toml ` file located in the repository root directory.

Create R2 Storage

Click R2 Object Storage in the left sidebar, then click Create Bucket. Enter ` twikoo ` as the bucket name and click the Create Bucket button.

After successful creation, return to the list page to view the newly created bucket.

Click twikoo to enter the bucket. Select the Settings tab, then click Connect Domain under Public Access. Enter your desired domain name, such as twikoo.r2.example.org. If you don't have a personal domain yet, refer to my other blog post on How to Register a Domain and Host It with Cloudflare.

Then click Continue. Click Connect Domain again to return to the settings page. You'll see your domain status as Initializing. Refresh the status after a few minutes, and it will change to Active.

Next, you need to add the domain you just set up to the ` wrangler.toml ` file in the repository root directory.

Worker Deployment

In the Cloudflare sidebar, click Workers and Pages, then click Create. Select Create Worker and enter the name ` cf-create-worker `.

Then click Deploy. After a moment, it will show Deploy Successful. Click Continue to Project, select the Settings tab, scroll to the Build section, and click the Connect button.

A panel will appear on the right. First, connect your GitHub account. Then select your repository. If it's not listed, enter the repository name directly (e.g., `twikoo-cloudflare`). Select the `main ` branch.

In the Deployment Command field, enter `npx wrangler deploy --minify `. Finally, click the Connect button to save.

If you manually entered the repository name in the previous step, you'll need to click the Manage button here to redirect to your GitHub account login.

After logging in, navigate to the Repository access page. Click the Select repositories button, choose your repository, and click Save.

The page will then redirect back to Cloudflare. You may encounter an error message, but you can ignore it and simply close the page.

Now save the modified wrangler.toml file and push it to your GitHub repository. This will trigger the automatic Worker build. After a short while, you'll see the deployment update on the Workers and Pages pages. Click the Visit button. If everything is working correctly, you should see content like this.

Bind Domain

Click twikoo-cloudflare again to enter the Settings tab. Under Domains and Routes, click Add. The Domains and Routes panel will appear on the right. Click Custom Domain, enter the domain you wish to bind (e.g., twikoo.example.org ), and click the Add Domain button.

After adding, your domain is now bound to the deployed Worker.

Configure in NotionNext

Configure your Twikoo backend URL in NotionNext's admin panel and redeploy.

🎉🎉🎉🎉🎉

All set! Click the gear icon in the bottom-right corner to configure your admin password and explore additional feature settings. Dive in and give it a try!

Additional Settings

Configuring the Comment Module

Click the gear icon in the comment section. You'll need to set a password upon first entry. After setting it, you'll enter the management panel. Click the " Configuration Management " tab for initial setup.

Open Privacy, enter " cloudflare " in the IMAGE_CDN field, then click Save to enable image uploads.

Each remaining configuration option includes detailed instructions. Feel free to explore them at your own pace—the system functions normally without modifications.

Preventing Bots

When posting comments, you can use Cloudflare Turnstile verification to block bots. To enable it, first click Turnstile in the left sidebar of Cloudflare, then click the Add Widget button.

Name the widget arbitrarily (e.g., "twikoo "). Click the Add Hostname button below to open the right-side panel. Enter your personal blog's domain (e.g., blog.example.org ) in the top input field. Click the Add button on the right to add the hostname to the Selected Hostnames list below.Click the bottom Add button again. The right panel will close, and the hostname will be added to the Hostname Management list. Finally, click the Create button in the bottom-right corner. A message confirming the successful creation of the Turnstile widget will appear.

On this page, the Site Key and Secret Key are the values you need to copy and configure in Twikoo's admin panel. Next, reopen the admin panel, navigate to Anti-Spam, enter the Site Key content in the TURNSTILE_SITE_KEY field, and enter the Secret Key content in the TURNSTILE_SECRET_KEY field. Click Save to close the panel.

After completing these steps, posting a comment will trigger the Cloudflare CAPTCHA checkbox. In most cases, it will display "Success" after a short wait, or a checkbox will appear for confirmation upon successful verification. Only in rare instances will a JS challenge be initiated.

🤗 Summary

Cloudflare uses D1 and R2 buckets. Save the D1 value, then save the R2 custom domain value → Fork and modify the relevant values for both in `twikoo-cloudfarewrangler.toml` → Deploy the page to Cloudflare → Modify the Notion Next environment variables for deployment.

📎 Reference Article

NotionNext帮助手册Twikoo | NotionNext帮助手册
Twikoo | NotionNext帮助手册
NotionNext现在支持 Twikoo啦，很好用的评论插件
NotionNext帮助手册

Hexo博客系列（二）为你的博客添加评论系统 | 一梦一孤舟
Hexo博客系列（二）为你的博客添加评论系统 | 一梦一孤舟
接着上一期，当我们建好博客以后，如何想和访客更好的交流，就需要评论系统了。Hexo 是不带评论系统的，但是各种主题都会有丰富的评论系统支持，就拿上一期介绍的 hexo-theme-matery 来说，可支持 Gittalk、Gitment、

💡

For questions about installing or using Twikoo, feel free to leave a comment below and let's chat!